<!DOCTYPE html>
<html>
{include file="public:head"}
<body>
<div class="sui-layout">
    {include file="public:navbar"}
    <!--start 右侧-->
    <div class="main-t" id="app" v-cloak>
        <div class="sidebar">
            <ul class="sui-nav nav-list nav-large">
                <li class="active"><a>所有订单<i class="sui-icon icon-tb-right pull-right mt3"></i></a></li>
            </ul>
        </div>
        <div class="content">
            <!--begin breadcrumb-->
            <div class="breadcrumb">
                <ul class="sui-breadcrumb breadcrumb-dark">
                    <li><a href="{:url('index/index')}">首页</a></li>
                    <li><a href="{:url('order/index')}">订单</a></li>
                    <li class="active">所有订单</li>
                </ul>
            </div>
            <!--end breadcrumb-->
            <form class="sui-form form-horizontal" action="{:url('index')}" method="get">
                <input type="hidden" id="page" name="page" value="{$currentPage}">
                <div class="control-group">
                    <span>筛选内容：</span>
                    <input type="text" name="queryText" class="input-medium input-large ml20" placeholder="请输入订单号" v-model="queryText">
                    <a class="queryBtn sui-btn btn-primary ml15" v-on:click="search()">筛选</a>
                </div>
                <table class="set-table">
                    <tr class="noline">
                        <td class="set-cols1 text-l w82">订单状态：</td>
                        <td class="set-cols2">
                            <label data-toggle="checkbox" class="checkbox-pretty-new mr15">
                                <input type="checkbox" name="status[]" value="0" v-model="status"><span class="ml10">待付款</span>
                            </label>
                            <label data-toggle="checkbox" class="checkbox-pretty-new mr15">
                                <input type="checkbox" name="status[]"  value="1" v-model="status" ><span class="ml10">代发货</span>
                            </label>
                            <label data-toggle="checkbox" class="checkbox-pretty-new mr15">
                                <input type="checkbox" name="status[]"  value="2" v-model="status"><span class="ml10">已完成</span>
                            </label>
                            <label data-toggle="checkbox" class="checkbox-pretty-new mr15">
                                <input type="checkbox" name="status[]"  value="3" v-model="status"><span class="ml10">已取消</span>
                            </label>
                        </td>
                    </tr>
                </table>
            </form>

            <table class="sui-table table-bordered table-hover">
                <thead>
                <tr>
                    <th>订单号</th>

                    <th>客户</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>配送要求</th>
                    <th>下单时间</th>
                    <th width="10%" class="center">操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo"}
                    <tr>
                        <td>{$vo.order_sn}</td>

                        <td>心花怒放 18411002140</td>
                        <td>￥{$vo.order_total}</td>
                        <td>
                            {switch name="vo.status"}
                                {case value="0"}<span class="sui-text-danger">待付款</span>{/case}
                                {case value="1"}<span class="sui-text-info">支付完成，待发货</span>{/case}
                                {case value="2"}<span class="sui-text-success">已完成</span>{/case}
                                {case value="3"}<span class="sui-text-">已取消</span>{/case}
                            {/switch}
                        </td>
                        <td>{$vo.pos_province|get_posname} {$vo.pos_city|get_posname} {$vo.pos_district|get_posname}</td>
                        <td>{$vo.create_time|date="Y-m-d H:m:s",###}</td>
                        <td class="center">
                            <a href="" class="btn-link">详情</a>
                        </td>
                    </tr>
                {/volist}
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="sui-pagination pagination-small pull-right"></div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            queryText: "{$queryText}",
            status: {$status},
        },
        methods: {
            search: function() {
                $("#page").val(0);
                $("form").submit();
            }
        }
    });
    $(document).ready(function() {
        $(".menuitem").removeClass("active");
        $(".menuorder").addClass("active");

        //分页
        $('.sui-pagination').pagination({
            pages: {$lastpage},
            styleClass: ['pagination-small'],
            showCtrl: true,
            remote: true,
            currentPage: {$currentPage},
            displayPage: 10,
            onSelect: function(num) {
                $("#page").val(num);
                $("form").submit();
            }
        });
    });
</script>
